<template>
  <a-config-provider global>
    <template #empty="scope">
      <a-empty
        v-show="scope?.component === item.name"
        v-for="item in emptyConfig"
        :key="item.name"
        :description="item?.description || '暂无数据'"
        in-config-provider>
        <template #image>
          <component :is="item.icon"></component>
        </template>
      </a-empty>
    </template>
  </a-config-provider>
</template>

<script setup lang="ts">
import tableEmpty from '~icons/icons/empty-data'
interface IEmptyConfig {
  name: string
  icon?: Component | VNode[]
  description?: string
}
const emptyConfig = ref<IEmptyConfig[]>([
  {
    name: 'table',
    icon: h(tableEmpty, { class: 'w-30 h-30' })
  },
  {
    name: 'select',
    icon: h(tableEmpty, { class: 'w-20 h-20' })
  }
])
</script>
